<template>
	<view class="conter">
		<uni-nav-bar :fixed="true" shadow :background-color="navClor" color="#000000" status-bar title="中医数字" :border="false" :shadow="false" />
		<view class="top">
			<view class="ming">
				<image class='tx' src="../../static/txiang.png"></image>
				<view class="ming_right">
					<view class="ming_right_title">
						<view class="ming_right_titlename">苏佳闻</view>
						<view class="ming_right_vip">
							<image src="../../static/huiyuan.png" mode="" style="width: 139rpx; height: 41rpx;"></image>
							<view>
								<view>v1</view>
								<view>会员等级</view>
							</view>
						</view>
					</view>
					<view class="ming_right_ry">
						<view>中国当代名医创始人</view>
						<view>央视数字频道主持人</view>
					</view>
					<view class="ming_right_img">
						<view class="ming_right_address">
							<image src="../../static/dizhiguanli.png" mode=""></image>
							<view>北京市朝阳区北苑路2号</view>
						</view>
						<view class="ming_right_address">
							<image src="../../static/dianhua.png" mode=""></image>
							<view>18612234387</view>
						</view>
					</view>

				</view>
			</view>
			<view class="tuiguang">
				<image src="/static/tuiguang.png" mode="" />
				<view class="msg">
					<view>推荐好友得会员</view>
					<view>好友创建名片得3天会员</view>
				</view>
			</view>
			<view class="readme">
				<view>
					<image src="/static/menling.png" mode="" />
					<view>300人访问过我</view>
				</view>
				<view>
					<image src="/static/liulan.png" mode="" />
					<view>5000人浏览过我</view>
				</view>
			</view>
		</view>
		<template v-if="!myInviteState">
			<view class="card">
				<view class="card_item">
					<view class="card_icon">
						<image src="/static/card1.png" mode="aspectFit" style="width: 32rpx;height: 31rpx;" />
					</view>
					<view class="card_msg" style="border: 0px;">
						<view>我的创作</view>
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
				<view class="card_item">
					<view class="card_icon">
						<image src="/static/card2.png" mode="aspectFit" style="width: 32rpx;height: 31rpx;" />
					</view>
					<view class="card_msg">
						<view>会员中心</view>
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
			</view>
			<view class="card">
				<view class="card_item" @click="myInvite">
					<view class="card_icon">
						<image src="/static/card3.png" mode="aspectFit" style="width: 32rpx;height: 31rpx;" />
					</view>
					<view class="card_msg" style="border: 0px;">
						<view>我邀请的人</view>
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
				<view class="card_item">
					<view class="card_icon">
						<image src="/static/card4.png" mode="aspectFit" style="width: 32rpx;height: 31rpx;" />
					</view>
					<view class="card_msg">
						<view>我的管理人</view>
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
				<view class="card_item">
					<view class="card_icon">
						<image src="/static/card5.png" mode="aspectFit" style="width: 32rpx;height: 31rpx;" />
					</view>
					<view class="card_msg">
						<view>联系客服</view>
						<uni-icons type="right" size="20"></uni-icons>
					</view>
				</view>
			</view>
		</template>
		<view class="myInvite" v-if="myInviteState">
			<view class="myInvite_title">
				<uni-icons type="left" size="20" class="left" @click="back"></uni-icons>
				<view>我邀请的人</view>
				<view class="myInvite_number">10个</view>
			</view>
			<view class="myInvite_list">
				<view class="myInvite_item">
					<view class="myInvite_num">1</view>
					<image src="../../static/txiang.png" mode="" />
					<view class="myInvite_name">
						被封春国的夏天
					</view>
				</view>
				<view class="myInvite_item">
					<view class="myInvite_num">2</view>
					<image src="../../static/txiang.png" mode="" />
					<view class="myInvite_name">
						波妞
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			myInviteState: false,
			navClor: "rgba(255, 255, 255, 0)"
		}
	},
	methods: {
		myInvite() {
			this.myInviteState = true
		},
		back() {
			this.myInviteState = false
		}
	},	onPageScroll: function(e) {
			if (e.scrollTop > 1) {
				this.navClor = 'rgba(255, 255, 255, 1)'
			}else{
				this.navClor = 'rgba(255, 255, 255, 0)'
			}
		}
}
</script>

<style lang="scss">
.conter {
	width: 100vw;
	height: 100vh;
	background-image: url("https://a1.qpic.cn/psc?/V12obLfG48bPoN/TmEUgtj9EK6.7V8ajmQrELQEdpWFggBvaieRar6Xa4DOxEGpaDeohRAvM62gkDhnick*qTVD1iFmL*K8cKoBr5bs5fwtKHgPAHDPQAlb5ig!/b&ek=1&kp=1&pt=0&bo=0ALgBdAC4AUDJwI!&tl=1&vuin=2664244587&tm=1734156000&dis_t=1734158548&dis_k=970bc0677d7ee2e1f4977efe3086caec&sce=60-2-2&rf=viewer_4");

	.uni-nav-bar-text {
		font-size: 38rpx;
		font-weight: 700;
	}

	.top {
		width: 100%;
		overflow: hidden;
		border-bottom: 1rpx solid #E5E2D9;

		.ming {
			width: 100%;
			padding: 0 80rpx;
			height: 258rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 70rpx;
			margin-top: 100rpx;
			margin-bottom: 33rpx;

			.tx {
				width: 241rpx;
				height: 258rpx;
				background: linear-gradient(0deg, #4FACFE 0%, #00F2FE 100%);
				border-radius: 25rpx;
				border: 0px solid #93F2D5;
			}

			.ming_right {
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				width: calc(100% - 314rpx);

				.ming_right_title {
					width: 100%;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					gap: 18rpx;

					.ming_right_titlename {
						font-family: AlibabaPuHuiTiB;
						font-weight: 700;
						font-size: 48rpx;
						color: #101011;
					}

					.ming_right_vip {
						flex: 1;
						height: 100%;
						position: relative;

						image {
							position: absolute;
							left: 0;
							top: 10rpx;
						}

						>view {
							width: 100%;
							height: 100%;
							position: relative;
							z-index: 9;
							display: flex;
							align-items: center;

							view:nth-child(1) {
								font-family: HYYaKuHei;
								font-weight: normal;
								font-size: 21rpx;
								color: #fff;
								margin-left: 10rpx;
								margin-right: 15rpx;
							}

							view:nth-child(2) {
								font-family: AlibabaPuHuiTiR;
								font-weight: 400;
								font-size: 21rpx;
								color: #101011;
							}
						}
					}
				}

				.ming_right_ry {
					width: 100%;

					>view {
						font-family: AlibabaPuHuiTiR;
						font-weight: 500;
						font-size: 27rpx;
						color: #101011;
						line-height: 43rpx;
					}

				}

				.ming_right_img {
					width: 100%;

					.ming_right_address {
						font-family: AlibabaPuHuiTiR;
						font-weight: 400;
						font-size: 23rpx;
						color: #101011;
						line-height: 37rpx;
						opacity: 0.65;
						display: flex;
						align-items: center;
						gap: 6rpx;

						>image {
							width: 26rpx;
							height: 26rpx;
						}
					}
				}

			}
		}

		.tuiguang {
			width: 100%;
			height: 223rpx;
			position: relative;

			image {
				width: calc(100% - 30rpx);
				height: 100%;
				position: absolute;
				left: 30rpx;
				top: 0;
			}

			.msg {
				width: 100%;
				height: 100%;
				display: flex;
				flex-wrap: wrap;
				position: relative;
				z-index: 9;
				align-content: center;
				padding-left: 270rpx;
				gap: 15rpx;
				bottom: 10rpx;

				view:nth-child(1) {
					width: 100%;
					font-family: AlibabaPuHuiTiM;
					font-weight: 400;
					font-size: 42rpx;
					color: #FFFFFF;
				}

				view:nth-child(2) {
					width: 100%;
					font-family: AlibabaPuHuiTiR;
					font-weight: 400;
					font-size: 31rpx;
					color: #FFFFFF;
					opacity: 0.8;
				}
			}
		}

		.readme {
			width: 100%;
			height: 50rpx;
			display: flex;
			margin-top: 30rpx;
			margin-bottom: 20rpx;

			>view {
				width: 50%;
				height: 100%;
				padding-left: 53rpx;
				display: flex;
				align-items: center;
				gap: 15rpx;

				>image {
					width: 34rpx;
					height: 39rpx;
				}

				>view {
					font-family: SourceHanSansCN;
					font-weight: 400;
					font-size: 30rpx;
					color: #383735;
				}
			}

			view:nth-child(1) {
				border-right: 1rpx solid #E5E1DE;
			}

			view:nth-child(2) {
				>image {
					width: 48rpx;
					height: 29rpx;
				}
			}
		}
	}

	.card {
		width: 100%;
		background-color: #fff;
		margin-top: 18rpx;

		.card_item {
			width: 100%;
			height: 87rpx;
			display: flex;
			align-items: center;

			.card_icon {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 35rpx;
				margin-right: 37rpx;

			}

			.card_msg {
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 1rpx solid #E0DFDD;
				padding-right: 24rpx;

				>view {
					font-family: SourceHanSansCN;
					font-weight: 400;
					font-size: 30rpx;
					color: #383735;
				}
			}
		}
	}

	.myInvite {
		width: 100%;
		background-color: #fff;
		border-top: 1rpx solid #E5E2D9;
		padding: 0 58rpx;
		box-sizing: border-box;
		margin-top: 16rpx;

		.myInvite_title {
			width: 100%;
			height: 87rpx;
			border-bottom: 1rpx solid #E0DFDD;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			>view {
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 30rpx;
				color: #383735;
			}

			.left {
				position: absolute;
				left: 0;
				top: 26rpx;
			}

			.myInvite_number {
				position: absolute;
				right: 50rpx;
				top: 26rpx;
			}

			// >view:nth-child(1) {
			// 	margin-right: 150rpx;
			// }
		}

		.myInvite_list {
			width: 100%;

			.myInvite_item {
				display: flex;
				align-items: center;
				padding: 24rpx 0;

				.myInvite_num {
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 24rpx;
					color: #383735;
				}

				image {
					width: 45rpx;
					height: 41rpx;
					margin-left: 45rpx;
					margin-right: 85rpx;
				}

				.myInvite_name {
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 24rpx;
					color: #383735;
				}
			}
		}
	}
}
</style>